﻿<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <link rel="stylesheet" href="__CSS__/supplies/common.css" />
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css" />
    <!--<link rel="stylesheet" href="__ASSETS__/css/ace.min.css" />-->
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css" />
    <style>
        body{
            height: 100% ;
            overflow: hidden;
            background: white;
        }
        .form-title {
            height: 40px;
            text-align: right;
        }
        .detail_a{
            cursor: pointer;
        }
        .table-responsive{
            height:calc(100% - 95px)
        }
        .bootstrap-table{
            height:100%
        }
        .fixed-table-container{
            height:calc(100% - 70px) !important;
        }
        .checkHead table .form-value input{
            height: 34px;
            width: 200px;
        }
        .form-title1{
            height: 60px;
            width: 100px;
            text-align: right;
        }
        .form-control{
            border-radius: 0;
        }
        .post-address_content{
            width: 90%;
            height: 90%;
            background-color: white;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 6px;
            -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
            box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
            position: absolute;
            top: 70%;
            left: 55%;
            margin-top: -50%;
            margin-left: -50%;
        }
        .business_title {
            height: 40px;
            width: 100%;
            color: #333;
            font-size: 16px;
            line-height: 40px;
            padding-left: 20px;
            border-bottom: 1px solid #e5e5e5;
        }
        .business_con {
            width: 100%;
            height: calc(100% - 92px);
            border-bottom: 1px solid #e5e5e5;
            padding-left: 15px;
            padding-top: 15px;
            overflow: auto;
        }
        .business_con ul li {
            width: 100%;
            height: 35px;
            line-height: 35px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .business_footer {
            width: 100%;
            height: 50px;
            padding: 10px;
        }
        .business_footer button {
            float: right;
            margin-left: 15px;
        }
    </style>
</head>
<body>
<!--搜索-->
<div style="height: 100%">
    <div class="checkHead" id="content" style="padding-top: 10px;height: 90px;">
        <table class="checkHead-table" style="/*position: absolute;right: 0px;*/">
            <tr>
                <td class="form-title">
                    区域：
                </td>
                <td class="form-value">
                    <input v-model="searchData.district" type="text" class="search county" readonly="readonly" placeholder="请选择区域" />&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                <td class="form-title">
                    店铺名称：
                </td>
                <td class="form-value">
                    <input v-model="searchData.name" type="text" class="search" placeholder="请输入店铺名称" />&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                <td class="form-title">
                    联系人：
                </td>
                <td class="form-value">
                    <input v-model="searchData.user_name" type="text" class="search" placeholder="请输入联系人" />&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                </tr>
                <tr>
                <td class="form-title">
                    店铺电话：
                </td>
                <td class="form-value">
                    <input v-model="searchData.tel" type="text" class="search" placeholder="请输入店铺电话" />&nbsp;&nbsp;&nbsp;&nbsp;
                </td>

                <td class="form-title">
                    联系人电话：
                </td>
                <td class="form-value">
                    <input v-model="searchData.phone" type="text" class="search" placeholder="请输入联系人电话" />&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                    <td class="form-title"></td>
                    <td class="form-value"></td>
                <td>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-default" v-on:click="searchs()">
                        <i class="icon-refresh align-top bigger-125"></i>
                        查询
                    </button>
                    <button class="btn btn-default" v-on:click="refresh">
                        <i class="icon-reply align-top bigger-125"></i>
                        重置
                    </button>
                </td>
            </tr>
        </table>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">用户详情:</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" onsubmit="return false;" enctype="multipart/form-data">
                            <table>
                                <tr>
                                    <td class="form-title1">
                                        店铺名称：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.name" name="name" type="text" class="search form-control" />
                                    </td>
                                    <td class="form-title1">
                                        邮编：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.postcode"  name="postcode" type="text" class="search form-control" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-title1">
                                        店铺地址：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.addr" name="addr"  type="text" class="search form-control" />
                                    </td>
                                    <td class="form-title1">
                                        公司名称：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.company_name"  name="company_name" type="text" class="search form-control" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-title1">
                                        店铺电话：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.tel" name="tel" type="text" class="search form-control" />
                                    </td>
                                    <td class="form-title1">
                                        联系人：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.user_name" name="user_name" type="text" class="search form-control" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-title1">
                                        联系人电话：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.phone" name="phone" type="text" class="search form-control" />
                                    </td>
                                    <td class="form-title1">
                                        联系人邮箱：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.email" name="email" type="text" class="search form-control" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-title1">
                                        帐号：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.account" name="account" readonly="readonly" type="text" class="search form-control" />
                                    </td>
                                    <td class="form-title1">
                                        密码：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.password" name="password" type="password" class="search form-control" value=""/>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>

                    <div class="post-address_content" style="display: none">
                        <div class="business_title">
                            选择地址
                        </div>
                        <div class="business_con">
                            <ul id="postAddress">
                                <li  v-for="(value,key) in addr_info">
                                    <input type="radio" name="address" :value="key" >{{value.postal_code}},{{value.addr}}
                                </li>
                            </ul>
                        </div>
                        <div class="business_footer">
                            <button type="button" class="btn btn-default" v-on:click="closePostCode">关闭</button>
                            <button type="button" class="btn btn-default" v-on:click="selectAddr">确定</button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" v-on:click="saveUserInfo()" data-dismiss="modal">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="countyModal" tabindex="-1" role="dialog" aria-labelledby="countyModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 600px;height: 500px;">
                <div class="modal-header" style="width: 100%;height: 50px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="countyModalLabel">选择郡:</h4>
                </div>
                <div class="modal-body" style="width: 100%;height: 385px; overflow: auto;">
                    <div class="zTreeDemoBackground left" id="div_tree" style="">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
                <div class="modal-footer" style="width: 100%;height: 65px;">
                    <button type="button" class="btn btn-default" onclick="saveCounty();" data-dismiss="modal">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>



    <div class="table-responsive" style="margin-top: 0px;background: white;">
        <table class="table" id="user_table"></table>
    </div>
</div>

<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/supplies/vue-validator.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/ztree/jquery.ztree.all.min.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script rel="script" src="__JS__/vue-resource.js"></script>
<script>
    var searchData = {};
    var setting = {
        view: {
            selectedMulti: false
        },
        async: {
            enable: true,
            url: "{:url('apishop/Index/getAreaTree')}",
            autoParam: ["name", "nameEn"],
            otherParam: { "otherParam": "zTreeAsyncTest" },
            dataFilter: filter
        },
        callback: {
            beforeClick: beforeClick,
            beforeAsync: beforeAsync,
            onAsyncError: onAsyncError,
            onAsyncSuccess: onAsyncSuccess
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    function beforeClick(treeId, treeNode) {
        if (!treeNode.isParent) {
            {
            }
        } else {
            return true;
        }
    }
    var log, className = "dark";
    function beforeAsync(treeId, treeNode) {

        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
        return true;
    }
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        showLog("[ " + getTime() + " onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        showLog("[ " + getTime() + " onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }

    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    function refreshNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            type = e.data.type,
            silent = e.data.silent,
            nodes = zTree.getSelectedNodes();
        if (nodes.length == 0) {
            alert("请先选择一个父节点");
        }
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.reAsyncChildNodes(nodes[i], type, silent);
            if (!silent) zTree.selectNode(nodes[i]);
        }
    }



    $(document).ready(function () {
        $('input[name=postcode]').change(function () {
            vm.getAddrInfo();
        });
        $.fn.zTree.init($("#treeDemo"), setting);
        $(".county").on("click",function(){
            $('#countyModal').modal({
                keyboard: true
            })
        })

    });
    var tableheight = document.documentElement.clientHeight - 96;
    // 用户管理
    $('#user_table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/User/userList")}',
        columns: [
            {
                checkbox: true
            }, {
                field: 'id',
                align: 'center',
                title: '用户ID',
                width:120
            }, {
                field: 'name',
                align: 'center',
                title: '店铺名称'
            }, {
                field: 'company_name',
                align: 'center',
                title: '公司名称'
            }, {
                field: 'tel',
                align: 'center',
                title: '店铺电话'
            }, {
                field: 'is_shelves',
                title: '操作',
                align: 'center',
                width: 120,
                formatter: operateFormatter
            }
        ],
        data: [
            {
                "id": 1,
                "name": "店铺名称",
                "company_name": "公司名称",
                "phone": "店铺电话"
            }],
        queryParams: function (params) {
            var param = {
                search: searchData,
                pageSize: params.pageSize,
                pageNumber: params.pageNumber
            };
            return param;
        },
        responseHandler: function (res) {
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });
    // 详情按钮
    function operateFormatter(val, row, index) {

        var divStr = "<div class='form-inline'>"
        var detailStr = "<a href='javascript:void(0);' class='detail_a' onclick='detailUser(1," + row.id + ")'>查看详情</a>"

        divStr += detailStr;
        divStr += "</div>";
        return divStr;
    }

    function saveCounty(){
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getSelectedNodes();
        console.log(nodes);
        if(nodes.length == 0){
            alert("请选择郡");
            return false;
        }
        console.log(nodes[0]);
        $(".county").val(nodes[0].name);
        vm.searchData.district = nodes[0].name;
    }


    function toParsModel(serializeArray) {
        ///serializeArray=[{name:'name',value:'value'},......]
        var model = {};
        try {
            for (i = 0; i < serializeArray.length; i++) {
                var item = serializeArray[i];
                model[item.name] = item.value;
            };
        } catch (e) {
            console.log(e);
        }

        return model;
    }

    //        //用户详细
    function detailUser(index, id) {
        vm.detailUsers(index , id);
    }

    vm = new Vue( {
        el : "#content" ,
        data : {
            searchData : {
                    district:'',
//                    name:'',
//                    user_name:'',
//                    tel:'',
//                    phone:'',
            } ,
            formData:{
                name : '',
                postcode : '',
                addr : '',
                tel : '',
                phone : '',
                account : '',
                password : '',
                email : '',
                user_name : '',
                company_name : '',
                id : '',
            },
            addr_info : {}
        },
        methods : {
            searchs : function ( index ) {
                searchData = this.searchData;
                if ( index == 1 ) {
                    $( "#user_table" ).bootstrapTable( 'refresh' );
                } else {
                    $( "#user_table" ).bootstrapTable( 'refresh' );
                }
            } ,
            getAddrInfo : function () {
                var url = "{:url('userweb/Login/zipCode')}";
                this.$http.post(url,{
                    postcode : this.formData.postcode,
                }).then(function (data) {
                    vm.addr_info = data.body.data.list;
                    $('.post-address_content').css('display','block')
                })
            },
            //修改用户信息
            saveUserInfo : function () {
                $.ajax({
                    url:"{:url('admin/User/saveUserInfo')}",
                    type:"POST",
                    data:{'data':vm.formData},
                    success:function (data) {
                        layer.msg(data.msg, {
                            time: 1500
                        });
                    }
                })
            },
            //用户详情
            detailUsers : function ( index , id) {
                $('#exampleModal').modal({
                    keyboard: true
                });
                $.ajax({
                    url : "{:url('admin/User/userDetail')}",
                    type : "POST",
                    data : {'id':id},
                    success : function (data) {
                        if(data.status == 200)
                        {
                            vm.formData = data.data;
                        }
                    }
                })
            },
            refresh : function () {
                this.searchData = {};
            },
            closePostCode : function () {
                $('.post-address_content').css('display','none')
            },
            selectAddr : function () {
                var a = $('input[name=address]:checked').val()
                if(a)
                {
                    this.formData.postcode = this.addr_info[a].postal_code;
                    this.formData.addr = this.addr_info[a].addr;
                    $('.post-address_content').css('display','none')
                }
                else
                {
                    alert('请选择地址!')
                }
            }
        }
    } );
</script>
</body>
</html>